<template>
 <div>

  <div class="zhuce" v-if="state=='0'">
 <div style="margin-bottom: 50px;">
  <el-alert
  :closable="false"
  :show-icon="true"

    :title="titleerr"
    type="success">
  </el-alert>
 </div>

  </div>

  <div class="zhuce" v-if="state=='2'">
    <div class="title">用户认证</div>
 <div style="margin-bottom: 50px;">
  <el-alert
    :title="titleerr"
    :closable="false"
  :show-icon="true"
    type="error">
  </el-alert>
 </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户角色" prop="roleIds">
            <el-select v-model="form.roleIds" placeholder="请选择角色"  
            disabled
            @change="choosejiaose">
              <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                :value="item.roleId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户职称" prop="title">
            <el-select v-model="form.title" placeholder="请选择职称" @change="choosezhicheng">
              <el-option v-for="item in titleoption" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
    </el-form>
    <el-row>
<div class="filelist">
<div class="fileitem" style="margin-top: 20px;" v-for="(item,index) in wenlist" :key="index" @dragover="choseitem(item)"  @click="chouseit(item)">
<div  class="" style="margin-bottom: 10px; font-synthesis: 24px; color: #333;">  <span style="color: red;">
  *
</span> {{ item.dataName }}  <el-tag v-if="item.exampleUrl"  type="success" style="cursor: pointer;" @click="shili(item.exampleUrl)">查看示例</el-tag> 
  <p style="font-size: 12px;line-height: 18px; color: #666;" v-if="item.tips">说明：{{ item.tips }}</p>
</div>
 <el-upload
 
class="upload-demo"
drag
:headers="headers"
:before-upload="before"
:action="url"
:on-success="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:data="obj"
:on-exceed="handleExceed"
:file-list="item.file"
accept=".pdf,.jpg,.png,.jpeg"
>
<!-- <el-button size="small" type="primary">点击上传</el-button> -->
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf,jpg,png,jpeg文件</div>
</el-upload>
</div>

</div>
 </el-row>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitForm">提交认证</el-button>
    </div>

  </div>



  <div class="zhuce" v-if="state=='3'">
    <div class="title">用户认证</div>
 <!-- <div style="margin-bottom: 50px;">
  <el-alert
    :title="titleerr"
    type="error">
  </el-alert>
 </div> -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户角色" prop="roleIds">
            <el-select v-model="form.roleIds" placeholder="请选择角色"  
            
            @change="choosejiaose">
              <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                :value="item.roleId"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label="用户职称" prop="title">
            <el-select v-model="form.title" placeholder="请选择职称" @change="choosezhicheng">
              <el-option v-for="item in titleoption" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>
      
    </el-form>
    <el-row>
<div class="filelist">
<div class="fileitem" style="margin-top: 20px;" v-for="(item,index) in wenlist" :key="index" @dragover="choseitem(item)"  @click="chouseit(item)">
<div  class="" style="margin-bottom: 10px; font-synthesis: 24px; color: #333;">
  <span style="color: red;">
  *
</span>
  {{ item.dataName }} <el-tag v-if="item.exampleUrl" type="success" style="cursor: pointer;" @click="shili(item.exampleUrl)">查看示例</el-tag>
  <p style="font-size: 12px;line-height: 18px; color: #666;" v-if="item.tips">说明：{{ item.tips }}</p>
</div>
 <el-upload
 
class="upload-demo"
drag
:headers="headers"
:action="url"
:on-success="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:data="obj"
:on-exceed="handleExceed"
:file-list="item.file"
accept=".pdf,.jpg,.png,.jpeg"
>
<!-- <el-button size="small" type="primary">点击上传</el-button> -->
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf,jpg,png,jpeg文件</div>
</el-upload>
</div>

</div>
 </el-row>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitForm">提交认证</el-button>
    </div>

  </div>




 </div>

</template>

<script>
import { getjiaose, getwenlist,renzheng,zhungtai } from "@/api/system/zhuce";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
import axios from 'axios'
export default {
  name: "zhuce",
  data() {

    return {
      url:"",
      headers:{ Authorization: "Bearer " + getToken() },
    
     
      titleoption:[
      
      ],

      wenlist:[
        // {
        //   file:[
        //   {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }, {
        //   name: 'food2.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
        //   ]
        // },
        // {
        //   file:[
        //   {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }, {
        //   name: 'food2444.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
        //   ]
        // }
      ],
      form: {
        roleIds: undefined,
        title:undefined,
          
      
      },
      roleOptions: "",
      rules: {
        roleIds: [
          { required: true, message: "角色不能为空", trigger: "change" }
        ],
        title: [
          { required: true, message: "职称不能为空", trigger: "change" }
        ],
      },
      obj:{
          authenticationDataId:"",
          authenticationDataName:"",
          dataType:""
        },
        subfile:[],
        state:"",
        titleerr:""
    };
  },
  watch: {

  },
  created() {
  
    this.jiaose()
    this.url= process.env.VUE_APP_BASE_API + "/system/registeredUser/authenticationDataUserUpload"
    this.getzhungtai()
  },
  methods: {
    before(file){
    },
    shili(url){
window.open(url)
    },
    getzhungtai(){
      zhungtai({}).then(res=>{
        console.log(res)
   this.state=res.state
   if(this.state=="2"){
    this.form.roleIds=res.role.roleId
    this.getlist()
    this.titleerr=res.message
   }
   if(this.state=="0"){
    this.titleerr=res.message

   }
      })
    },
    choseitem(item){
     this.obj.authenticationDataId=item.dataId
     this.obj.authenticationDataName=item.dataName
     this.obj.dataType=item.dataType
    },
    chouseit(item){
     this.obj.authenticationDataId=item.dataId
     this.obj.authenticationDataName=item.dataName
     this.obj.dataType=item.dataType
    },
    handleRemove(file, fileList) {
      },
      handlePreview(file) {
        console.log(this.wenlist,"111111")
        let str=file.authenticationDataUser
        if (this.subfile.length != 0) {
          // this.subfile.forEach(el => {
            let item = this.subfile.find(ele => ele.authenticationDataId == str.authenticationDataId);
							if (!item) {
								this.subfile.push(str)
              }else{
                this.subfile.forEach(el => {
                  if(el.authenticationDataId==str.authenticationDataId){
                    el.data=str.data
                  }
                })
              }
		
					}else{
            this.subfile.push(str)
          }
      },
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传一个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    choosejiaose() {
      this.wenlist=""
      this.getlist()
    },
    choosezhicheng(){

    },
    jiaose() {
      getjiaose({}).then(res => {
        console.log(res)
        this.roleOptions = res.roles
        this.titleoption=res.userTitles
      })
    },
    getlist() {
      let str = this.form.roleIds
      getwenlist(str).then(res => {
        console.log(res)
        this.wenlist=res.data
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      console.log(this.form,"111")
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.subfile.length!=this.wenlist.length){
            this.$modal.msgSuccess("请上传文件");
          }else{
            let obj={
              user:{},
              authenticationDataUser:[]
            }
            obj.user.userTitle=this.form.title
            obj.user.roleId=this.form.roleIds
            obj.authenticationDataUser=this.subfile
            renzheng(obj).then(res=>{
              this.$modal.msgSuccess("已提交，待审核");
              this.getzhungtai()
            })

          }
          // if (this.form.userId != undefined) {
          //   updateUser(this.form).then(response => {
          //     this.$modal.msgSuccess("修改成功");
          //   });
          // } else {
          //   addUser(this.form).then(response => {
          //     this.$modal.msgSuccess("新增成功");
          //   });
          // }
        }
      });
    },


  }
};
</script>
<style lang="scss" scope>
.zhuce {
  margin: 0;
  padding: 0;
  width: 1000px;
  margin: 60px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 50px;

  .title {
    width: 100%;
    text-align: center;
    font-size: 28px;
    line-height: 100px;
    font-weight: bold;
    color: #333;
  }

  .footer {
    text-align: center;
    margin-top: 20px;
  }
}
</style>